<!--
 * @Author: Li Zengkun
 * @Date: 2022-07-26 21:14:43
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-07-26 21:26:45
 * @Description: 设置
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css      ">
    <title>设置</title>
</head>

<body>
    <header>
        <a href="#">
            <img src="../img/右箭头.png" alt="">
        </a>
        设置
    </header>

    <ul class="option-list">
        <li class="option">
            <span>账户资料</span>
            <i class="fa fa-angle-right" aria-hidden="true"></i>
        </li>
        <li class="option">
            <span>消息推送</span>
            <div class="switch-box">
                <input type="checkbox" id="switch" hidden="hidden">
                <label for="switch" class="switch">
                    <div class="dot">
                    </div>
                </label>
            </div>
        </li>
        <li class="option">
            <span>清除缓存</span>
            <span>50.23MB</span>
        </li>
        <li class="option">
            <span>意见反馈</span>
            <i class="fa fa-angle-right" aria-hidden="true"></i>
        </li>
        <li class="option">
            <span>关于我们</span>
            <i class="fa fa-angle-right" aria-hidden="true"></i>
        </li>
        <li class="option">
            <span>分享APP</span>
            <i class="fa fa-angle-right" aria-hidden="true"></i>
        </li>

    </ul>
    <div class="bottom-btn">退出登录</div>
</body>


<style>
    .option-list {
        width: 100%;
    }
    
    .option {
        border-bottom: .13vw solid #eaeaea;
        padding: 4.8vw 3.07vw;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        font-size: 3.73vw;
        color: #333333;
        cursor: pointer;
    }
    /* 滑块开关 */
    
    .switch-box {
        width: 13.33vw;
        height: 6vw;
    }
    
    .switch {
        display: flex;
        align-items: center;
        width: 13.33vw;
        height: 6vw;
        background-color: #ccc;
        border-radius: 50px;
        transition: all .2s;
    }
    
    .dot {
        width: 5.2vw;
        height: 5.2vw;
        background-color: #fff;
        border-radius: 50%;
        transform: translate(0.1vw, 0.1vw);
        transition: all .2s;
    }
    
    #switch:checked~.switch {
        background-color: #009a29;
    }
    
    #switch:checked~.switch .dot {
        transform: translate(7.6vw);
        /* background-color: rgb(48, 196, 241); */
    }
</style>

</html>